import { Avatar } from "@ark-ui/react/avatar";

export default function AvatarGroup() {
  const avatars = [
    { src: "https://i.pravatar.cc/300", fallback: "JD" },
    { src: "https://i.pravatar.cc/301", fallback: "SM" },
    { src: "https://i.pravatar.cc/302", fallback: "AB" },
    { fallback: "KL" }, // No src, will show fallback
  ];

  return (
    <div className="flex -space-x-2">
      {avatars.map((avatar, index) => (
        <Avatar.Root key={index} className="w-12 h-12 relative z-10">
          <Avatar.Fallback className="w-full h-full bg-linear-to-br from-blue-500 to-purple-600 text-white font-semibold text-sm flex items-center justify-center rounded-full">
            {avatar.fallback}
          </Avatar.Fallback>
          {avatar.src && (
            <Avatar.Image
              src={avatar.src}
              alt="avatar"
              className="w-full h-full object-cover rounded-full"
            />
          )}
        </Avatar.Root>
      ))}
    </div>
  );
}
